<template>
	<view class="page-home" >
		<!-- 头部 开始 -->
		<nav-bar>
			<block slot="content">
				<button class="cu-btn round custom-head" @click="toSearch">搜索你想看的内容</button>
			</block>
		</nav-bar>

		<!-- 头部 结束 -->

		<!-- 导航栏 开始 -->
		<view class="page-tab">
			<tab-nav :tab-cur="TabCur" :tab-list="tabList" tabKey="title" :is-show-menu="isShowMenu"
			 @tabSelect="tabSelect" />
		</view>
		<!-- 导航栏 结束 -->


		<!-- 关注 开始 -->
		<user-recommend-list :TabCur="TabCur" ref="userRecommend" v-if="TabCur === 0" />
		<!-- 关注 结束 -->

		<!-- 推荐 开始 -->
		<recommend-list v-else :TabCur="TabCur" :tabList="tabList" @createPoster="createPoster"/>
		<!-- 推荐 结束 -->

		<!-- 海报 -->
		<my-poster ref="hchPoster" :canvasFlag.sync="canvasFlag" :posterObj.sync="posterData" />
	</view>
</template>

<script>
	import tabNav from '@/components/TabNav'
	import UserRecommendList from './components/UserRecommendList'
	import RecommendList from './components/RecommendList'
	import MyPoster from '@/components/MyPoster'
	import TabbarMixin from '@/mixins/tabbar.js'
	export default {
		mixins:[TabbarMixin],
		data() {
			return {
				userRecommendList: [],
				recommendList: [],
				TabCur: 1,
				tabList: [{
					title: '关注'
				}, {
					title: '推荐'
				}],
				menuList: [],
				query: {},
				isShowMenu: false,
				posterData: {},
				canvasFlag: true,
			};
		},
		components: {
			tabNav,
			UserRecommendList,
			RecommendList,
			MyPoster
		},
		methods: {
			async getCategoryList() {
				let {
					data
				} = await this.$h.api.videoModel.getCategorys()
				return data
			},
			tabSelect(index) {
				this.TabCur = index
			},
			toSearch() {
				this.$h.router.push({
					path: '/pages/home/search',
					params:{
						type:"user_video"
					}
				})
			},
			async createPoster(item) {
				let query = {
					id:item.id,
					type: "video"
				}
				let {
					data,
					code
				} = await this.$h.api.codeModel.getWXCode(query)
				if (code === 1) {
					this.canvasFlag = false
					let {avatar,head_img,title,nickname,code_img}=data.data
					if(!avatar||!nickname){
						this.$h.toast("请先完善个人信息")
						return
					}
					this.posterData={
						avatar,
						url: head_img, //商品主图
						title, //标题
						userInfo: nickname,
						subTitle: "我刚分享了",
						code: code_img, //小程序码
					}
					this.$nextTick(function() {
						this.$refs.hchPoster.createCanvasImage(); //调用子组件的方法
					})
				}
			},
		},
		onLoad(options) {
			//针对外部分享
			if(this.$h.utils.isNotEmptyObj(options)){
				if(options.type=='share_userVideo'){
					this.$h.router.push({
						path:"/pages/video/videoDetail",
						params:{
							id:options.id
						}
					})
				}
				if(options.type=='share_adminVideo'){
					this.$h.router.push({
						path:"/pages/video/adminVideo/videoDetail",
						params:{
							id:options.id
						}
					})
				}
				if(options.type=='share_live'){
					this.$h.router.push({
						path:"/pages/live/liveDetail",
						params:{
							id:options.id
						}
					})
				}
			}
		},
		onShow(){
			//获取头部分类
			this.getCategoryList().then(res => {
				if(res){
					this.isShowMenu = res.length > 3
					this.tabList = [...this.tabList, ...res]
				}
			})
			//刷新用户推荐
			if(this.TabCur === 0){
				this.$refs.userRecommend.refresh()
			}
		},
		//分享
		onShareAppMessage(res) {
			let info = res.target.dataset.info
			// let query = {
			// 	video_id: info.id,
			// 	share_type: "wechat"
			// }
			// this.$h.api.videoModel.postShareVideo(query)
			return {
				title: info.title,
				imageUrl: info.img,
				path: `/pages/home/home?type=share_userVideo&id=${info.id}`
			}
		},
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.page-home {
		height: 100%;

		.cu-btn.custom-head {
			width: 500rpx;
			height: 60rpx;
			background-color: $bgColor;
			color: #38383A;
			font-size: 28rpx;
		}

		.cu-card {
			padding-top: 20rpx;

			.cu-item.custom-margin {
				margin: 20rpx;
				overflow: hidden;
			}
		}

		/* 关注 开始 */
		.cu-card.custom-follow {
			.cu-list {
				height: 130rpx;

				&.menu-avatar>.cu-item .content>view:first-child {
					align-items: flex-start;
				}

				&.menu-avatar>.cu-item .content:after {
					border-bottom: 0;
				}

				&.menu-avatar>.cu-item .content {
					left: 124rpx;
					width: calc(100% - 48px - 30px);
				}

				.cu-avatar {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		/* 关注 结束 */
		/* 推荐 开始 */
		.cu-card.custom-recommend {
			.cu-item {
				border-top-left-radius: 0;
				border-top-right-radius: 0;
			}

			.image {
				height: 400rpx;
			}

			.cu-avatar.custom-avatar {
				width: 80rpx;
				height: 80rpx;
			}

			.user-name {
				color: $textColor;
			}

			.cu-btn.custom-share-btn {
				width: 44rpx;
				height: 44rpx;
				padding: 0;
				background-color: rgba(0, 0, 0, 0);
				margin-bottom: 8rpx;
			}

			.bottom-right {
				width: 200rpx;
			}
		}

		/* 推荐 结束 */

	}
</style>
